import React from 'react'
import context from './context'

function TodoItem({ data, index }){
    // 函数组件没有this
    // 函数组件的第一个参数为props

    // Consumer方法
    return (
        <context.Consumer>
            {
                function({removeItem,completeItem}){
                    return (
                        <tr className={data.done ? 'table-success' : ''}>
                            <th scope="row">{index + 1}</th>
                            <td>{data.todo}</td>
                            <td>{data.date}</td>
                            <td>{data.done ? '是' : '否'}</td>
                            <td>
                                <i className="bi bi-check-square me-3" onClick={completeItem.bind(null, data.id)}></i>
                                <i className="bi bi-x-square" onClick={removeItem.bind(null, data.id)}></i>
                            </td>
                        </tr>
                    )
                }
            }
        </context.Consumer>
    )
}



export default TodoItem;